<template>
  <view>
    <!-- 统计 -->
    <view class="statistics">
      <view class="statistics-title">生产统计</view>
      <view class="statistics-total">
        <view class="total">
          <text class="total-number">{{ count.need_number }}</text>
          <text class="total-name">计划产量</text>
        </view>
        <view class="total">
          <text class="total-number">{{ count.number }}</text>
          <text class="total-name">产量</text>
        </view>
      </view>
      <view class="statistics-detail">
        <view class="detail">
          <text class="detail-number">{{ count.bad_number }}</text>
          <text class="detail-name">不合格数</text>
        </view>
        <view class="detail">
          <text class="detail-number">{{ count.works }}</text>
          <text class="detail-name">工人数量</text>
        </view>
        <view class="detail">
          <text class="detail-number">{{ count.hours }}</text>
          <text class="detail-name">工时</text>
        </view>
      </view>
    </view>
    <!-- 功能 -->
    <view class="function">
      <view class="function-title">功能</view>
      <view class="function-list">
        <view class="list-item" v-for="item in functionList" :key="item.title">
          <navigator open-type="navigate" hover-class="none" :url="item.url">
            <image class="item-image" :src="item.image"></image>
            <text class="item-title">{{ item.title }}</text>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count: {},
      functionList: [
        {
          image: '../../static/images/function/1.png',
          title: 'BOM清单',
          url: '/pages/home/bom_list/index'
        },
        {
          image: '../../static/images/function/2.png',
          title: '生产计划',
          url: '/pages/home/prod_plan/index'
        },
        {
          image: '../../static/images/function/3.png',
          title: 'MRP计算',
          url: '/pages/home/mrp/index'
        },
        {
          image: '../../static/images/function/4.png',
          title: '生产单',
          url: '/pages/home/productions/index'
        },
        {
          image: '../../static/images/function/5.png',
          title: '领料单',
          url: '/pages/home/requisition/index'
        },
        {
          image: '../../static/images/function/6.png',
          title: '退料单',
          url: '/pages/home/materials/index'
        },
        {
          image: '../../static/images/function/7.png',
          title: '委外加工单',
          url: '/pages/home/outsource/index'
        },
        {
          image: '../../static/images/function/8.png',
          title: '验收单',
          url: '/pages/home/receipt/index'
        },
        {
          image: '../../static/images/function/9.png',
          title: '生产成本',
          url: '/pages/home/prod_cost/index'
        },
        {
          image: '../../static/images/function/10.png',
          title: '计件工资',
          url: '/pages/home/piece_salary/index'
        },
        {
          image: '../../static/images/function/11.png',
          title: '计时工资',
          url: '/pages/home/time_salary/index'
        }
      ]
    }
  },
  onShow() {
    // 如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态
    const curPages = getCurrentPages()[0] // 获取当前页面实例
    if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
      curPages.getTabBar().setData({
        selected: 0
      })
    }

    this.getData()
  },
  methods: {
    // 获取数据
    async getData() {
      const token = uni.getStorageSync('userInfo').token
      if (!token) return
      const res = await this.$api.datainfo.datainfo()
      if (res.code == 200) {
        this.count = res.data.countArr.count
      }
    }
  }
}
</script>

<style>
page {
  padding: 0 24rpx calc(58px + env(safe-area-inset-bottom));
}
</style>
<style lang="less" scoped>
// 统计
.statistics {
  width: 702rpx;
  padding: 32rpx 36rpx 40rpx;
  background: linear-gradient(180deg, #5cc1ff 0%, #1a96ff 100%);
  border-radius: 16rpx;
  color: #fff;
  .statistics-title {
    font-size: 32rpx;
    font-weight: 500;
  }
  .statistics-total {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 176rpx;
    border-bottom: 1px solid #caebff;
    .total {
      display: flex;
      flex-direction: column;
      align-items: center;
      .total-number {
        margin-bottom: 20rpx;
        font-size: 48rpx;
        font-weight: bold;
      }
    }
  }
  .statistics-detail {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .detail {
      display: flex;
      flex-direction: column;
      align-items: center;
      .detail-number {
        margin: 20rpx 0 10rpx;
        font-size: 36rpx;
        font-weight: bold;
        color: #ffffff;
      }
      .detail-name {
        font-size: 22rpx;
      }
    }
  }
}

// 功能
.function {
  width: 702rpx;
  margin: 20rpx 0 24rpx;
  background: #ffffff;
  border-radius: 16rpx;
  color: #333333;
  .function-title {
    padding: 32rpx 0 40rpx 36rpx;
    font-size: 32rpx;
    font-weight: 500;
  }
  .function-list {
    display: flex;
    flex-wrap: wrap;
    .list-item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 33.33%;
      margin-bottom: 60rpx;
      navigator {
        display: flex;
        flex-direction: column;
        align-items: center;
        .item-image {
          width: 80rpx;
          height: 80rpx;
        }
        .item-title {
          margin-top: 20rpx;
          font-size: 26rpx;
        }
      }
    }
  }
}
</style>
